/**
 * Tiem:    2023-02-18
 * File:    打车订单详情
 * Editor:  Hd
 */

import React, { Component } from "react";
import { Space, Steps, Tabs, Typography, Tag } from "antd";
import { CloseCircleOutlined } from "@ant-design/icons";
import { apiGetTaxiOrderDetails } from "@/request/petTaxi";
import goBack from '@/assets/icons/goBack.png';
import userAvatar from '@/assets/images/zhanwei_head.svg';
import "../style/index.less";

const Step = Steps.Step
const Tab = Tabs.TabPane;
const { Title } = Typography;
class OrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: props.match.params.id,
            current: 0,
            dataSource: {},
            items: [{ title: "待支付" }],
            taskId: ""
        }
    }
    //Initialization
    componentDidMount() {
        this.getData()
    }
    //CTRL
    getData = async () => {
        let id = this.state.id
        let res = await apiGetTaxiOrderDetails(id)
        if (res.code === 0 && res.data) {
            let items = this.state.items
            switch (res.data.orderStatus) {
                case 2:
                    items.push({ title: "已支付" })
                    this.setState({
                        items,
                        current: 1
                    })
                    break;
                case 3:
                    items.push({ title: "已关闭" })
                    this.setState({
                        items,
                        current: 1
                    })
                    break;
                default:
                    break;
            }
            this.setState({
                dataSource: res.data,
                taskId: res.data.taskId,
                customerPhone: (res.data.customerPhone).replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2"),
                ordercustomerPhone: (res.data.customerPhone).replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2"),
            })
        }
    }
    //Tabs 切换
    tabsChange = (value) => {
        if (value === '2') {
            this.props.history.push(`/missions/detail/${this.state.taskId}`);
        }
    }
    //View
    render() {
        const { dataSource, current, items, customerPhone, ordercustomerPhone } = this.state
        return (
            <div className="missionsDetailPage">
                <img preview={false} width={22} src={goBack} alt="" style={{ margin: "15px" }} onClick={() => this.props.history.goBack()}
                />
                {dataSource.refundStatus && <div className="steps" ><CloseCircleOutlined style={{ color: "red" }} /><span style={{ color: "red" }}>退款成功</span> &nbsp;&nbsp;&nbsp;退款金额：￥{(dataSource.payPrice / 100).toFixed(2)}</div>}
                <div className="steps">
                    <Steps current={current} >
                        {items.map((s, i) => <Step key={i} title={s.title} status={s.status} />)}
                    </Steps>
                </div>
                <div className="table">
                    订单概况
                    <table border="1" style={{ textAlign: "center" }} >
                        <tr>
                            <th className="label">创建时间</th>
                            <td>
                                {dataSource.createTime ?? "-"}
                            </td>
                            <th className="label">订单ID</th>
                            <td>
                                {dataSource.orderId ?? "-"}
                            </td>
                            <th className="label">订单编号</th>
                            <td>
                                {dataSource.orderCode ?? "-"}
                            </td>
                        </tr>
                        <tr>
                            <th className="label">订单内容</th>
                            <td style={{ fontSize: "12px" }}>
                                {dataSource.content ?? "-"}
                            </td>
                            <th className="label">订单备注</th>
                            <td>
                                {dataSource.remark ?? "-"}
                            </td>
                            <th className="label">更新时间</th>
                            <td>
                                {dataSource.updateTime ?? "-"}
                            </td>
                        </tr>
                        <tr>
                            <th className="label">操作人</th>
                            <td>
                                {dataSource.operator ?? "-"}
                            </td>
                            <th className="label" style={{ color: "red" }}>订单状态</th>
                            <td style={{ color: "red" }}>
                                {dataSource.orderStatusName ?? "-"}
                            </td>
                            <th className="label">订单金额（元）</th>
                            <td style={{ color: "red" }}>{(dataSource.totalPrice / 100).toFixed(2) ?? "-"}</td>
                        </tr>
                    </table>
                </div>
                <div className="detail">
                    <Tabs defaultActiveKey={1} tabBarStyle={{ paddingLeft: '2.5%' }} onTabClick={(value) => this.tabsChange(value)}>
                        <Tab key={'1'} tab={'订单详情'}>
                            <div className="tab-body">
                                <div className="task-progress border-bottom">
                                    <Title level={5}>订单明细</Title>
                                    <ul>
                                        <li>
                                            <Space>
                                                <div className="label">订单编号：</div>
                                                <div>{dataSource.orderCode ?? "-"}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">下单时间：</div>
                                                <div>{dataSource.createTime ?? "-"}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">手机号码：</div>
                                                <div>{ordercustomerPhone ?? "-"}</div>
                                            </Space>
                                        </li>
                                        {/* <li>
                                            <Space>
                                                <div className="label">优惠金额：</div>
                                                <div>{"￥" + (dataSource.discountPrice / 100).toFixed(2) ?? "-"}</div>
                                            </Space>
                                        </li> */}
                                        <li>
                                            <Space>
                                                <div className="label">订单总价：</div>
                                                <div>{"￥" + (dataSource.totalPrice / 100).toFixed(2) ?? "-"}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">实际付款：</div>
                                                <div style={{ color: "rgb(254,148,0)" }}>{"￥" + (dataSource.payPrice / 100).toFixed(2) ?? "-"}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">支付方式：</div>
                                                <div>{dataSource.paymentMethodName ?? "暂无"}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">订单状态：</div>
                                                <div>{dataSource.orderStatusName ?? "-"}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">订单备注：</div>
                                                <div style={{ width: "600px" }}>{dataSource.remark ?? "-"}</div>
                                            </Space>
                                        </li>
                                    </ul>
                                </div>
                                <div className="task-progress border-bottom">
                                    <Title level={5}>客户信息</Title>
                                    <ul>
                                        <li>
                                            <Space>
                                                <div className="label">客户头像：</div>
                                                <img className="img" alt="客户头像" src={userAvatar} />
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">客户昵称：</div>
                                                <div>{dataSource.customerName ?? "-"}</div>
                                            </Space>
                                        </li>
                                        <li>
                                            <Space>
                                                <div className="label">手机号：</div>
                                                <div>{customerPhone ?? dataSource.customerPhone}</div>
                                                <Tag onClick={() => { this.setState({ customerPhone: null }) }} >联系客户</Tag>
                                            </Space>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </Tab>
                        {dataSource.taskId && <Tab key={'2'} tab={'打车任务'}></Tab>}
                    </Tabs>
                </div>
            </div>
        )
    }
}

export default OrderDetail